/**
 * 
 * @param {*} 
 * @param {*} 
 */
/**
 * 
 * @param {document} dom - 挂载的dom对象
 * @param {object} config - 配置设置
 * @param {string} device - 设备。默认pc 【pc或则h5】
 */
function SignatureBox(dom,config,device='pc'){
  // debugger
  this.canDraw = false;
  //  配置
  this.style = config.style;
  this.color = config.color;
  this.lineWidth = config.lineWidth;
   // 创建canvas 对象
  const canvas = document.createElement('canvas');
  let ctx;
  let lastX;
  let lastY;
  this.isCanDraw = true;
  
  window.onload = ()=>{
    const width = dom.offsetWidth;
    const height = dom.offsetHeight;
    canvas.width = width;
    canvas.height = height;
      // 样式
    canvas.style = this.style;
    
    dom.appendChild(canvas);
      
    device === 'pc'? this.initData():this.h5InitData();
  }
  // pc
  this.initData = function(){
    ctx = canvas.getContext('2d') // 画笔
    canvas.addEventListener('mousemove',(event)=>{
      const x = event.pageX - canvas.offsetLeft
      const y = event.pageY - canvas.offsetTop
      event.preventDefault();
      this.drawLine(x,y)
    })
    canvas.addEventListener('mousedown',(event)=>{
      this.canDraw = true;
      const x = event.pageX - canvas.offsetLeft
      const y = event.pageY - canvas.offsetTop
      lastX = null;
      lastY = null;
      event.preventDefault();
      this.drawLine(x,y)
    })
    canvas.addEventListener('mouseup',(e)=>{
      this.canDraw = false;
    })
    canvas.addEventListener('mouseleave',(e)=>{
      this.canDraw = false;
    })
  }
  // h5
  this.h5InitData = function(){
    ctx = canvas.getContext('2d') // 画笔
    const offset = canvas.getBoundingClientRect();
    canvas.addEventListener('touchmove',(event)=>{
      const x = event.changedTouches[0].pageX - offset.left;
      const y = event.changedTouches[0].pageY - offset.top;
      this.drawLine(x,y)
    })
    canvas.addEventListener('touchstart',(event)=>{
      console.dir(event)
      this.canDraw = true;
      const x = event.changedTouches[0].pageX - offset.left;
      const y = event.changedTouches[0].pageY - offset.top;
      lastX = null;
      lastY = null;
      this.drawLine(x,y)
    })
    canvas.addEventListener('touchend',(e)=>{
      this.canDraw = false;
    })
    canvas.addEventListener('touchcancel',()=>{
      this.canDraw = false;
    })
    
  }
  this.drawLine = function(x,y){
    // 停止绘画控制
    if(!this.isCanDraw){
      return
    }
    // 绘画规制控制
    if(!this.canDraw){
      return;
    }
    if(lastX && lastY){
      ctx.beginPath();
      // 画笔颜色
      ctx.strokeStyle = this.color || '#000';
      // 画笔宽度
      ctx.lineWidth = this.lineWidth || '5';
      ctx.lineCap = 'round'
      ctx.lineJoin = "round";
      // ctx.moveTo(lastX, lastY);
      ctx.moveTo(lastX,lastY);
      ctx.lineTo(x,y);
      ctx.stroke();
      ctx.closePath();
    }
    lastX = x;
    lastY = y;
  }
  // 清空画布
  this.clearDraw = function(){
    ctx.beginPath();
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.closePath();
  }
  // 返回画布img
  this.getCanvasSignature = function(){
    const image = canvas.toDataURL('image/png');
    return image;
  }
  // 停止或继续画
  this.continueSignature = function(flag){
    this.isCanDraw = flag;
  }
}

export default SignatureBox;